<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        button{
            width: 100px;
            height:30px;
        }
        #div1{background-color: #FFFFFF;}
        #div1 .active{background-color: #c7254e;}
        #div1 div{
            width: 400px;
            height:200px;
            background: #ccc;
            display: none;
        }
    </style>
</head>
<body>

<div id="div1">
    <button>a</button>
    <button>b</button>
    <button>c</button>
    <div style="display: block;">aaaaaaaa</div>
    <div>bbbbbbbb</div>
    <div>cccccccc</div>
</div>

<script>

    window.onload=function () {
        new TabSwitch("div1");
    };

    function TabSwitch(id) {
        var _this = this;
        var oDiv = document.getElementById(id)
        this.aBtn = oDiv.getElementsByTagName("button");
        this.aDiv = oDiv.getElementsByTagName("div");

        for(var i=0;i<this.aBtn.length;i++){
            this.aBtn[i].index = i;
//            this.aBtn[i].onclick=this.fnClick;  这个会报错 length undefined 因为this.fnClick 通过this传递给了aBtn
            this.aBtn[i].onclick=function () {
                _this.fnClick;
            }
        }
    }


TabSwitch.prototype.fnClick=function(){
    for (var i = 0;i<this.aBtn.length;i++){
        this.aBtn[i].className='';
        this.aDiv[i].style.display="none";
    }
    this.className="active";
    this.aDiv[this.index].style.display="block";
};


    //改写成面向对象的，第一步：就是不能让函数内部有嵌套，此题中 onclick() 在onload()里面.第二部把写在函数内部的变量 写在全局中
    //第三部：把全局变量写成一个对象的属性(通过this方法)，第四部：把全局的函数写成对象的方法(通过prototype加)



</script>
</body>
</html>
<!--面向对象 - 思想-->
<!--js的面向对象-->
<!--oop的特点-->
<!--抽象：核心问题  最核心！-->
<!--封装：不考虑内部实现-->
<!--继承：从已有对象上，继承出新的对象-->
    <!--多重继承-->
    <!--多态-->

<!--对象的组成-->
    <!--方法-函数：过程，动态的-->
    <!--属性-变量：状态，静态的-->
<!--oop 95%以上就恶心在 this里-->
<!-- -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->
<!--this ： 当前发生事件的对象-->
    <!--当前方法属于谁，this就属于谁-->
<!-- -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->
<!--构造函数就是普通函数-->
<!--工厂方式（书中提到过）-->
<!--缺点：-->
    <!--函数重复：-->

<!-- -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->
<!--混合方式构造对象-->
                <!--属性写在构造函数里，而方法写在原型上-->

<!--类的命名规范-->

把面向过程的程序，写成面向对象的

window.onload
    初始化整个程序
构造函数
    初始化整个对象
